<template>
  <div class="table-head">
    <a-card :bordered="false" :header-style="{ padding: '0 12px' }">
      <template #title> {{ t["列表"] }} </template>

      <a-form :model="{}" label-align="left" auto-label-width>
        <a-row>
          <a-col :span="16">
            <a-form-item :label="t['名称']">
              <div class="w-[180px]">
                <a-input
                  v-model="query.themeName"
                  allow-clear
                  @clear="search"
                  @keydown.enter="search"
                />
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <div class="flex gap-4">
          <a-form-item :label="t['数据范围']">
            <Scope
              :include="['-', '4','5']"
              type="radio"
              @change="search"
              v-model="query.scope"
            ></Scope>
          </a-form-item>
        </div>
        <div class="flex justify-between w-full">
          <div>
            <a-button type="primary" @click="create"> {{ t["新增"] }}</a-button>
            <a-button @click="list"> {{ t["刷新"] }}</a-button>
          </div>

          <a-pagination
            v-model="query.pageNum"
            :page-size="query.pageSize"
            :total="query.total!"
            show-total
            show-page-size
            @page-size-change="pageSizeChange"
            @change="onChange"
            class="mb-4"
          ></a-pagination>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { create, list, search } from "../data/curd";
import { query } from "../data/table";

const t = translate("公共模块");

const onChange = (page: number) => {
  query.value.pageNum = page;
  list();
};
const pageSizeChange = (size: number) => {
  query.value.pageSize = size;
  list();
};
</script>

<style lang="scss" scoped>
:deep(.arco-card-header) {
  border: none;
}
</style>
